// import { Component, useState } from "react";

// function Fahrenheit(props) {
//   const { value, onChange } = props;
//   function change(e) {
//     let num =((e.target.value)-32) *5/9
//     if(isNaN(num)){
//       alert("请输入数字")
//       return
//     }
//     onChange(num);
//   }
//   return (
//     <div>
//       <label>华氏温度</label>
//       <input type="text" value={(value * 9) / 5 + 32} onChange={change} />
//     </div>
//   );
// }

// class Celsius extends Component {

//  change (e){
//   let num =e.target.value-1
//   if(isNaN(num)){
//     alert("请输入数字")
//     return
//   }
//     this.props.onChange(e.target.value);
//   }
//   render() {
//     const { value } = this.props;

//     return (
//       <div>
//         <label>摄氏温度</label>
//         <input
//           type="text"
//           value={value}
//           onChange={(e) => {
//             this.change(e)
//           }}
//         />
//       </div>
//     );
//   }
// }

// function App() {
//   let [tem, setTem] = useState(0);
//   function change(val) {
//     setTem(val);
//   }
//   return (
//     <div>
//       <h1>温度转换</h1>
//       <Fahrenheit
//         value={tem}
//         onChange={(val) =>change(val)}
//       ></Fahrenheit>
//       <hr />
//       <Celsius value={tem} onChange={(val) => setTem(val)}></Celsius>
//     </div>
//   );
// }
import React, { Component, useState } from "react";
import PropTypes from "prop-types";
import "./static/app.scss";
import { func } from "prop-types";

function Button(props) {
  let { type, children ,onClick} = props;
  return (
    <div className="ml-button">
      <span className={type} onClick={onClick}>{children}</span>
    </div>
  );
}
Button.propTypes = {
  type: PropTypes.oneOf(["default", "primary", "danger", "info"]),
  children: PropTypes.node,
};
Button.defaultProps = {
  type: "primary",
  children: "按钮",
};
class Modal extends Component {
  close(e) {
    //  console.log(e);
    if (e.target.className == "ml-layer") {
      this.props.onClose();
    }
  }
  render() {
    let { title, closable, children, type, onClose,onOk } = this.props;
    let renderFooter = () => {
      let btns = [];
      switch (type) {
        case "confirm":
          btns = [
            <Button type="primary" key="1" onClick={onOk}>确定</Button>,
            <Button type="danger" key="2" onClick={onClose}>取消</Button>,
          ];
          break;
        case "danger":
          btns = [
            <Button type="danger" key="1" onClick={onOk}>删除</Button>,
            <Button type="danger" key="2" onClick={onClose}>取消</Button>,
          ];
          break;
        case "info":
          btns = [<Button type="info">我知道了</Button>];
          break;
      }
      return btns;
    };
    return (
      <div className="ml-layer" onClick={(e) => this.close(e)}>
        <div className="ml-modal">
          <header>
            <div>
              <div>{title}</div>
              <div onClick={() => this.props.onClose()}>{closable && "X"}</div>
            </div>
          </header>
          <main>{children}</main>
          <footer>{renderFooter()}</footer>
        </div>
      </div>
    );
  }
}
Modal.propTypes = {
  title: PropTypes.node,
  closable: PropTypes.bool,
  children: PropTypes.node,
  type: PropTypes.oneOf(["danger", "confirm", "info"]),
};
Modal.defaultProps = {
  title: "默认标题",
  closable: true,
  children: <div>主体内容默认值</div>,
  type: "info",
};

function App() {
  let [show, setShow] = useState(false);
  function close() {
    setShow(false);
  }
  function Submit(){
    setShow(false);
    
  }
  return (
    <div>
      <button onClick={() => setShow(true)}>open Modal</button>
      {show && (
        <Modal
          title={<span style={{ color: "red" }}>删除用户</span>}
          closable
          type="confirm"
          onClose={close}
          onOk={()=>Submit()}
        >
          <div>
            <input type="text" />
            <div>你确定要添加此用户吗?</div>
          </div>
        </Modal>
      )}
    </div>
  );
}

export default App;
